<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>找回密码</title>
  <link rel="stylesheet" href="./css/index.css">
  <script src="./lib/jquery.js"></script>
  <script src="./lib/axios.js"></script>
</head>

<body>
  <!--说明： 分为三个大模块是按照步骤，最开始只显示找回账号DOM，点击下一步后切换到下一个容器，上一个不显示，依次类推 -->
  <div class="one">
    <div>
      <span class="active"><i>1</i>输入找回账号</span>
      <span><i>2</i>回答密保问题</span>
      <span><i>3</i>重置密码</span>
    </div>
    <div class="box">
      <div class="input-item">
        <label>请输入手机号：</label>
        <input type="text" id="phone">
      </div>
      <button id="onenext">下一步</button>
    </div>

  </div>
  <!----------------------------------------------------->
  <br>
  <hr>
  <div class="two">
    <div>
      <span><i>1</i>输入找回账号</span>
      <span class="active"><i>2</i>回答密保问题</span>
      <span><i>3</i>重置密码</span>
    </div>
    <div class="box">
      <div class="input-item">
        <label> 用户名：</label>
        <input type="text" value="" disabled>
      </div>
      <div class="input-item">
        <label> 手机号：</label>
        <input type="text" value="" disabled>
      </div>
      <div class="input-item">
        <label>密保问题：</label>
        <input type="text" value="" disabled>
      </div>
      <div class="input-item">
        <label>密保答案：</label>
        <input type="text" id="answer">
      </div>
      <button id="twoprev">上一步</button>
      <button id="twonext">下一步</button>
    </div>
  </div>
  <!----------------------------------------------------->
  <br>
  <hr>
  <div class="three">
    <div>
      <span><i>1</i>输入找回账号</span>
      <span><i>2</i>回答密保问题</span>
      <span class="active"><i>3</i>重置密码</span>
    </div>
    <div class="box">
      <div class="input-item">
        <label>请输入新密码：</label>
        <input type="text" id="newpaw">
      </div>
      <button id="threeprev">上一步</button>
      <button id="reset">立即重置</button>
    </div>
  </div>

</body>
<script>
  axios.defaults.baseURL = 'http://124.223.14.236:3001/api'

  const onenext = document.querySelector('#onenext')
  const one = document.querySelector('.one')
  const twoprev = document.querySelector('#twoprev')
  const twonext = document.querySelector('#twonext')
  const two = document.querySelector('.two')
  const three = document.querySelector('.three')
  const threeprev = document.querySelector('#threeprev')
  const reset = document.querySelector('#reset')
  const phone = document.querySelector('#phone')
  const answer = document.querySelector('#answer')
  const newpaw = document.querySelector('#newpaw')

  two.style.display = 'none'
  three.style.display = 'none'

  //获取密保问题
  // onenext.addEventListener('click', function (){
  //   two.style.display = 'block'
  //      one.style.display = 'none'
  // })

  onenext.addEventListener('click', function () {
    const url = '/user/findPwd'
    const pobj = { phone: phone.value }
    axios.get(url, { params: pobj }).then(function (re) {
      // console.log(re)
      if (re.data.success) {
        two.style.display = 'block'
        one.style.display = 'none'
      }
    })
  })

  //第二个盒子下一步，第二个隐藏，第三部分显示
  twonext.addEventListener('click', function () {
    const url = '/user/findPwd'
    const pobj = { phone: phone.value }
    axios.get(url, { params: pobj }).then(function (re) {
      console.log(re)
      if (answer.value === re.data.data.question) {
        three.style.display = 'block'
        two.style.display = 'none'
      }
    })
  })

  //第二个盒子的上一步，第二个隐藏，第一个显示
  twoprev.addEventListener('click', function () {
    one.style.display = 'block'
    two.style.display = 'none'
  })

  //第三个盒子的上一步，第三个隐藏，第二个显示
  threeprev.addEventListener('click', function () {
    two.style.display = 'block'
    three.style.display = 'none'
  })

  //重置
  reset.addEventListener('click', function () {
    const urls = '/user/resetPwd'
    const canshu = {
      id: 9511,
      password: newpaw.value,
      answer: '谢夏寅'
    }
    axios({
      method: 'POST',
      url: urls,
      data: canshu
    }).then(function (res) {
      console.log(res);
    })
  })














</script>

</html>